<template>
  <div>
    <div class="body-left-Nav">
          <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            router>
            
            <el-submenu index="userInfo">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>用户信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="queryInfo">查询用户信息</el-menu-item>
                <el-menu-item index="queryBill">查询账单信息</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="changeInfo">
                <template slot="title">修改用户信息</template>
                <el-menu-item index="changeUserInfo">更改用户信息</el-menu-item>
                <el-menu-item index="changeEmail">更改用户电子邮箱</el-menu-item>
                <el-menu-item index="changePlate">更改用户车牌号码</el-menu-item>
              </el-submenu>
            </el-submenu>
            
            <el-submenu index="bill">
              <template slot="title">
                <i class="el-icon-wallet"></i>
                <span>用户账户操作</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="billRecharge">用户充值</el-menu-item>
                <el-menu-item index="billRefund">用户退费</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="plate">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>用户车牌操作</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="plateRecharge">用户车牌充值</el-menu-item>
                <el-menu-item index="plateRefund">用户车牌退费</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
    </div>

    <div class="body-function">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
 methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style>
.body-left-Nav{
  width: 250px;
  background-color: #545c64;
  height: 935px;
  opacity: 0.9;
}
.body-function{
  position: absolute;
  width: 85%;
  height: 935px;
  top: 0px;
  right: 0px;
}
</style>